<template>
  <div class="ele-body">
    <el-card shadow="never">
      <!-- 搜索表单 -->
      <el-form
        :model="where"
        label-width="77px"
        @keyup.enter.native="reload"
        @submit.native.prevent>
        <el-row :gutter="15">

          <el-col :lg="8" :md="12">
            <el-form-item label="申请时间:">
              <el-date-picker
                style="width: 100%"
                v-model="where.create_time"
                type="datetimerange"
                value-format="yyyy-MM-dd HH:mm:ss"
                label-format="yyyy-MM-dd HH:mm:ss"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :lg="8" :md="12">
            <el-form-item label="删档状态:">
              <el-select clearable v-model="where.status" class="ele-fluid">
                <el-option label="已删档" value="1"/>
                <el-option label="未删档" value="0"/>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :lg="6" :md="12">
            <div class="ele-form-actions">
              <el-button
                type="primary"
                icon="el-icon-search"
                class="ele-btn-icon"
                @click="reload">查询
              </el-button>
              <el-button @click="reset">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <!-- 数据表格 -->
      <ele-pro-table
        ref="table"
        :where="where"
        :datasource="url"
        :columns="columns"
        :selection.sync="selection"
        height="calc(100vh - 315px)">
        <!-- 表头工具栏 -->
        <template slot="toolbar">

        </template>
        <!-- 操作列 -->
        <template slot="action" slot-scope="{row}">
          <el-link
            type="success"
            :underline="false"
            @click="applyAudit(row)"
            v-show="row.review_status == '1'"
            v-if="permission.includes('sys:applydeleteopen:audit')">审核
          </el-link>

        </template>

        <template slot="game_info" slot-scope="{row}">
          <div>
            <div class="game-info">
              <div class="game-img">
                <el-avatar shape="square" :size="25" :src="row.game_info.icon"/>
              </div>
              <div class="game-code">
                游戏编码：{{row.game_info.id}}
              </div>
              <div class="game-name">
                游戏名称：{{row.game_info.game_name}}
              </div>
            </div>
          </div>
        </template>

        <!-- 删档状态 -->
        <template slot="status" slot-scope="{ row }">
          <el-tag v-if="row.status === 0" type="info" size="small">未删档</el-tag>
          <el-tag v-if="row.status === 1" type="primary" size="small">已删档</el-tag>
        </template>

        <!-- 删档状态 -->
        <template slot="review_status" slot-scope="{ row }">
          <el-tag v-if="row.review_status === 1" type="primary" size="small">待审核</el-tag>
          <el-tag v-if="row.review_status === 2" type="success" size="small">已通过</el-tag>
          <el-tag v-if="row.review_status === 3" type="error" size="small">未通过</el-tag>
        </template>

      </ele-pro-table>
    </el-card>
    <!-- 审核弹窗 -->
    <audit
      :data="current"
      :visible.sync="showAudit"
      @done="reload"/>
  </div>
</template>

<script>
    import { mapGetters } from "vuex";
    import audit from './audit';

    export default {
        name: 'deleteApply',
        components: {audit},
        computed: {
            ...mapGetters(["permission"]),
        },
        data() {
            return {
                // 表格数据接口
                url: '/boxApplyDeleteOpen/index',
                // 表格列配置
                columns: [
                    {
                        columnKey: 'game_info',
                        label: '游戏信息',
                        align: 'center',
                        showOverflowTooltip: true,
                        minWidth: 200,
                        slot: 'game_info'
                    },
                    {
                        prop: 'open_name',
                        label: '区服名称',
                        showOverflowTooltip: true,
                        minWidth: 200,
                        align: 'center',
                    },
                    {
                        prop: 'status',
                        label: '删档状态',
                        showOverflowTooltip: true,
                        minWidth: 200,
                        align: 'center',
                        slot: "status"
                    },
                    {
                        prop: 'review_status',
                        label: '删档审核状态',
                        showOverflowTooltip: true,
                        minWidth: 200,
                        align: 'center',
                        slot: "review_status"
                    },
                    {
                        prop: 'reason',
                        label: '拒绝原因',
                        showOverflowTooltip: true,
                        minWidth: 200,
                        align: 'center'
                    },
                    {
                        prop: 'create_time',
                        label: '创建时间',
                        sortable: 'custom',
                        showOverflowTooltip: true,
                        minWidth: 160,
                        align: 'center',
                        formatter: (row, column, cellValue) => {
                            return this.$util.toDateString(cellValue);
                        }
                    },
                    {
                        prop: 'delete_time',
                        label: '删档时间',
                        sortable: 'custom',
                        showOverflowTooltip: true,
                        minWidth: 160,
                        align: 'center',
                        formatter: (row, column, cellValue) => {
                            return this.$util.toDateString(cellValue);
                        }
                    },
                    {
                        prop: 'plat_name',
                        label: 'GM名称',
                        showOverflowTooltip: true,
                        minWidth: 100,
                        align: 'center',
                    },
                    {
                        columnKey: 'action',
                        label: '操作',
                        width: 150,
                        align: 'center',
                        resizable: false,
                        slot: 'action',
                        fixed: "right"
                    }
                ],
                // 表格搜索条件
                where: {},
                // 表格选中数据
                selection: [],
                // 当前编辑数据
                current: null,
                // 是否显示编辑弹窗
                showEdit: false,
                // 是否显示审核弹窗
                showAudit: false,
                //审核说明
                auditInfo:'',
            };
        },
        methods: {
            /* 刷新表格 */
            reload() {
                this.$refs.table.reload({where: this.where});
            },
            /* 重置搜索 */
            reset() {
                this.where = {};
                this.reload();
            },
            /* 显示编辑 */
            openEdit(row) {
                this.current = row;
                this.showEdit = true;
            },
            /* 显示审核 */
            applyAudit(row) {
                this.current = row;
                this.showAudit = true;
            }
        }
    }
</script>

<style scoped>
</style>
